<template>
  <div class="app-container ohn">
    <div class="ohn">
      <span class="fl pointer" @click="goBack()"
        ><i class="el-icon-arrow-left" /> {{ testTrade.name }}</span
      >
      <el-button
        class="fr"
        type="primary"
        plain
        @click="handleNextSteps(testTrade)"
        >{{ testTrade.status | statusHandleTextFilter }}</el-button
      >
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="检测交易单" name="detection"
        ><DetectionDetail :detection-detail-data="testTradeDetail.testTrade" />
      </el-tab-pane>
      <el-tab-pane
        v-if="testTrade.status !== 'testTradeCreated'"
        label="检测报价单"
        name="quotation"
      >
        <QuotationDetail :quotation-detail-data="testTradeDetail.testQuotation"
      /></el-tab-pane>
      <el-tab-pane
        v-if="
          testTrade.status !== 'testTradeCreated' &&
          testTrade.status !== 'testQuotationCreated' &&
          testTrade.status !== 'testQuotationConfirmed'
        "
        label="检测申请单"
        name="apply"
        ><ApplyDetail :apply-detail-data="testTradeDetail.testApplicationForm"
      /></el-tab-pane>
      <el-tab-pane
        v-if="
          testTrade.status !== 'testTradeCreated' &&
          testTrade.status !== 'testQuotationCreated' &&
          testTrade.status !== 'testQuotationConfirmed' &&
          testTrade.status !== 'testApplicationFormConfirmed'
        "
        label="检测工作单"
        name="worksheet"
        ><WorksheetDetail
          :worksheet-detail-data="testTradeDetail.testWorkOrder"
      /></el-tab-pane>
      <el-tab-pane
        v-if="
          testTrade.status !== 'testTradeCreated' &&
          testTrade.status !== 'testQuotationCreated' &&
          testTrade.status !== 'testQuotationConfirmed' &&
          testTrade.status !== 'testApplicationFormConfirmed' &&
          testTrade.status !== 'testWorkOrderCreated' &&
          testTrade.status !== 'testWorkOrderConfirmed'
        "
        label="检测报告单"
        name="report"
        ><ReportDetail
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DetectionDetail from "./detectionDetail.vue";
import QuotationDetail from "./quotationDetail.vue";
import ApplyDetail from "./applyDetail.vue";
import WorksheetDetail from "./worksheetDetail.vue";
import ReportDetail from "./reportDetail.vue";
export default {
  components: {
    DetectionDetail,
    QuotationDetail,
    ApplyDetail,
    WorksheetDetail,
    ReportDetail,
  },
  filters: {
    statusHandleTextFilter(val) {
      if (val === "testTradeCreated") {
        // 检测交易创建完成  testTradeCreated
        return "创建报价单";
      } else if (val === "testQuotationCreated") {
        // 报价单创建完成 testQuotationCreated
        return "确认报价单";
      } else if (val === "testQuotationConfirmed") {
        // 报价单确认完成 testQuotationConfirmed
        return "创建申请单";
      } else if (val === "testApplicationFormCreated") {
        // 申请单创建完成 testApplicationFormCreated
        return "确认申请单";
      } else if (val === "testApplicationFormConfirmed") {
        // 申请单确认完成 testApplicationFormConfirmed.
        return "创建工作单";
      } else if (val === "testWorkOrderCreated") {
        // 工作单创建完成 testWorkOrderCreated
        return "确认工作单";
      } else if (val === "testWorkOrderConfirmed") {
        // 工作单确认完成 testWorkOrderConfirmed
        return "创建报告单";
      } else if (val === "testReportCreated") {
        // 报告单创建完成
        return "报告单创建完成";
      } else if (val === "testReportConfirmed") {
        // 报告单确认完成
        return "报告单确认完成";
      }
    },
  },
  data() {
    return {
      activeName: "detection",
      testTrade: {
        name: "",
        id: "",
        status: "",
      },
      testTradeDetail: {},
    };
  },
  created() {
    this.testTrade.name = this.$route.query.name;
    this.testTrade.id = this.$route.query.id;
    this.testTrade.status = this.$route.query.status;
    this.handleSearchTestTradeDetail();
  },
  mounted() {},
  methods: {
    handleSearchTestTradeDetail() {
      this.tableLoading = true;
      this.$store
        .dispatch("transaction/queryTestTradeDetail", {
          testTradeId: this.testTrade.id,
        })
        .then((res) => {
          const { data, success, errorMessage } = res;
          if (success) {
            this.testTradeDetail = data || {};
          } else {
            this.$message.error(errorMessage);
          }
        })
        .catch(() => {})
        .finally(() => {
          this.tableLoading = false;
        });
    },
    goBack() {
      this.$router.push({
        path: "/detection/list",
      });
    },
    handleNextSteps(data) {
      if (
        data.status === "testTradeCreated" ||
        data.status === "testQuotationConfirmed" ||
        data.status === "testApplicationFormConfirmed" ||
        data.status === "testWorkOrderConfirmed" ||
        data.status === "testReportConfirmed"
      ) {
        this.$router.push({
          path: "/detection/create",
          query: { id: data.id, name: data.testName, status: data.status },
        });
      } else if (
        data.status === "testQuotationCreated" ||
        data.status === "testApplicationFormCreated" ||
        data.status === "testWorkOrderCreated" ||
        data.status === "testReportCreated"
      ) {
        this.$router.push({
          path: "/detection/steps",
          query: { id: data.id, name: data.testName, status: data.status },
        });
      }
    },
  },
};
</script>
